<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>首页</title>
</head>
<body>

<!--导航栏 menu-->
<div th:replace="~{commons/common::menu(activeUrl = 'index.html')}"></div>


<!--主体部分-->
<div class="m-padded-tb-mini m-container">
    <div class="ui container">

        <div class="ui stackable grid m-padded-tb-big">

            <!--左边博客列表-->
            <div class="eleven wide column">
                <!--多少篇-->
                <div class="ui top attached segment">

                    <div class="ui two column grid">
                        <div class="column">
                            <h3 class="ui blue header">博客</h3>
                        </div>
                        <div class="right aligned column">
                            共&nbsp;<h2 class="ui teal header m-inline-block m-text-thin m-text-spaced"
                                       th:text="${pageInfo.total}"> 12 </h2>&nbsp;篇
                        </div>
                    </div>

                </div>

                <!--content-->
                <div class="ui attached segment">
                    <!--一篇博客摘要-->
                    <div class="ui padded vertical segment m-padded-tb-big" th:each="indexBlog : ${pageInfo.list}">
                        <div class="ui middle aligned mobile reversed stackable grid">
                            <!--展示博客的简要内容-->
                            <div class="eleven wide column">

                                <h3 class="ui header">
                                    <a class="m-font-color" th:href="@{/article/} + ${indexBlog.id}"
                                       th:text="${indexBlog.title}" target="_blank">1.单例模式简介</a>
                                </h3>

                                <p class="m-text" th:text="${indexBlog.description}">
                                    饿汉式是最简单的单例模式的写法，保证了线程的安全，执行效率高，但不能延时加载。
                                    但饿汉式也存在一些问题，比如，在单例中要创建大量的数据。
                                </p>

                                <div class="ui stackable grid">
                                    <!--头像、作者、日期信息-->
                                    <div class="ui eleven wide column">
                                        <!--小头像-->
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://picsum.photos/id/1/100/100" alt=""
                                                     class="ui avatar image" th:src="@{${indexBlog.avatar}}">
                                                <div class="content">
                                                    <a class="header" th:text="${indexBlog.nickname}">孙忠杰</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> <span
                                                    th:text="${#dates.format(indexBlog.createTime, 'yyyy-MM-dd')}">2020-03-04</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span th:text="${indexBlog.views}">6666</span>
                                                次阅读
                                            </div>
                                        </div>
                                    </div>
                                    <!--标签 class="ui blue basic button label m-padded-small m-label" ui blue basic label m-padded-tiny-->
                                    <div class="ui right aligned five wide column">
                                        <a th:href="@{/category/} + ${indexBlog.type.id}" target="_blank"
                                           class="ui blue basic right pointing label m-padded-small"
                                           th:if="${indexBlog.type != null}" th:text="${indexBlog.type.name}">
                                            设计模式
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!--博客图片-->
                            <div class="five wide column">
                                <a th:href="@{/article/} + ${indexBlog.id}" target="_blank">
                                    <img th:src="@{${indexBlog.firstPicture}}" alt="" class="ui rounded image">
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

                <!--翻页按钮-->
                <div class="ui bottom attached segment">
                    <div class="ui two column grid">
                        <div class="right aligned column">
                            <a th:href="@{/index.html(pageNum=${pageInfo.hasPreviousPage} ? ${pageInfo.prePage} : 1)}"
                               class="mini ui blue basic button">Prev</a>
                        </div>

                        <div class="left aligned column">
                            <a th:href="@{/index.html(pageNum=${pageInfo.hasNextPage} ? ${pageInfo.nextPage} : ${pageInfo.pages})}"
                               class="mini ui blue basic button">Next</a>
                        </div>
                    </div>
                </div>

            </div>
            <!--右边功能卡片-->
            <div class="five wide column">
                <!--标签-->
                <div class="ui segments">
                    <!--top-->
                    <div class="ui secondary segment">

                        <div class="ui two column grid">
                            <div class="column">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="right aligned column">
                                <a th:href="@{/tags.html}" target="_blank"> more<i
                                        class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <!--content-->
                    <div class="ui blue segment">
                        <a th:href="@{/tag/} + ${tag.id}" target="_blank" class="ui tag label m-margin-tb-tiny"
                           th:each="tag : ${tags}">
                            <span th:text="${tag.name}">Java</span>
                            <div class="detail m-black-color" th:text="${#arrays.length(tag.blogs)}">20</div>
                        </a>

                    </div>
                </div>

                <!--分类-->
                <div class="ui segments m-margin-top-large">
                    <div class="ui secondary segment">
                        <div class="ui two column grid">
                            <div class="column">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="right aligned column">
                                <a th:href="@{/category.html}" target="_blank"> more<i
                                        class="angle double right icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui blue segment">
                        <div class="ui vertical fluid menu">
                            <!--每一个类别-->
                            <a th:href="@{/category/} + ${type.id}" class="item" target="_blank"
                               th:each="type:${types}">
                                <span th:text="${type.name}">Java基础</span>
                                <span th:text="| ${#arrays.length(type.blogs)} 篇 |"
                                      class="ui blue basic left pointing label">10</span>
                            </a>

                        </div>
                    </div>
                </div>

                <!--最新文章-->
                <div class="ui segments m-margin-top-large">
                    <!--top-->
                    <div class="ui secondary segment">
                        <i class="bookmark icon"></i>最新文章
                    </div>
                    <!--content-->
                    <div class="ui segment" th:each="latest : ${latestBlog}">
                        <a th:href="@{/article/} + ${latest.id}" target="_blank" class="m-black-color m-text-thin"
                           th:text="${latest.title}">SpringBoot基础（十一）</a>
                    </div>
                </div>

                <!--二维码-->
                <!-- <h4 class="ui horizontal divider header m-margin-top-large">扫描加好友</h4>
                 <div class="ui centered card" style="width: 11em;">
                     <img th:src="@{/images/wechat.jpg}" alt="" class="ui rounded image">
                 </div>-->

            </div>

        </div>

    </div>

</div>


<br>
<br>
<br>
<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>

<!-- 引用的 js-->
<th:block th:replace="~{commons/common::script}">
</th:block>


<script>
    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });

    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });
</script>
</body>
</html>